<template>
  <SysDialog
    :visible.sync="show"
    :title="title"
    width="500px"
    atob
    :showFullscreen="false"
  >
    <template>
      <el-form
        ref="formRef"
        :model="form"
        label-width="120px"
        label-position="left"
        size="small"
      >
        <!-- Link Name Type Mode ClientIP ClientPort MapName-->
        <el-form-item label="Link Name：">
          <el-input class="w200" v-model="form.name" placeholder="Link Name" />
        </el-form-item>
        <el-form-item label="Type：">
          <el-select class="w200" v-model="form.type" placeholder="Type">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Mode：">
          <el-select class="w200" v-model="form.mode" placeholder="Mode">
            <el-option
              v-for="item in modeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="Client IP：">
          <el-input class="w200" v-model="form.ip" placeholder="Client IP" />
        </el-form-item>
        <el-form-item label="Client Port：">
          <el-input
            class="w200"
            v-model="form.port"
            placeholder="Client Port"
          />
        </el-form-item>
        <el-form-item label="Map ame：">
          <el-select class="w200" v-model="form.mapname" placeholder="Map Name">
            <el-option
              v-for="item in mapList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-form>
    </template>
    <template #button>
      <el-button plain size="small">OK</el-button>
      <el-button plain size="small" @click="show = false">Cancel</el-button>
    </template>
  </SysDialog>
</template>

<script setup>
import { ref, computed, watch, onMounted } from "vue";
const emit = defineEmits(["update:visible"]);
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  isEdit: {
    type: Boolean,
    default: false,
  },
});

const form = ref({
  name: "",
  type: "1",
  mode: "1",
  ip: "",
  port: "",
  mapname: "",
});

const typeList = ref({
  1: {
    value: "1",
    label: "Send",
  },
  2: {
    value: "2",
    label: "Receive",
  },
});
const modeList = ref([
  {
    value: "1",
    label: "Client",
  },
  {
    value: "2",
    label: "Server",
  },
]);
const mapList = ref([
  {
    value: "1",
    label: "Map1",
  },
  {
    value: "2",
    label: "Map2",
  },
]);

const title = computed(() => {
  return `${props.isEdit ? "Edit" : "New"} Link`;
});

const show = computed({
  get: () => props.visible,
  set: (val) => emit("update:visible", val),
});

watch(
  () => props.visible,
  (val) => {
    if (val) {
      //   重置form
      form.value = {
        name: "",
        type: "1",
        mode: "1",
        ip: "",
        port: "",
        mapname: "",
      };
    }
  },
);
</script>

<style scoped lang="scss">
.w200 {
  width: 200px;
}
</style>
